<template>
  <div>
    <el-card class="cardBox">
      <div class="title">
        <!-- 浮动文本 -->
        <h1 class="">主运输环境参数</h1>
        <el-button @click="alarmBtn">报警总数：0</el-button>
      </div>
      <section class="section">
        <el-table
          :data="tableData"
          border
          style="width: 100%; text-align: center"
        >
          <el-table-column
            v-for="(item, index) in tableHeader"
            :key="index"
            :prop="item.key"
            :label="item.label"
            :formatter="
              (row, column, cellValue) => formatValue(item.key, cellValue)
            "
          >
            <!-- 只对 smog 字段定制渲染 -->
            <template v-if="item.key === 'smog'" #default="{ row }">
              <span :style="{ color: row.smog === true ? 'green' : 'inherit' }">
                {{ row.smog }}
              </span>
            </template>
          </el-table-column>
        </el-table>
      </section>
    </el-card>

    <!-- 公司log -->
    <el-row>
      <div class="kx-log-box">
        <img
          class="kx-img"
          src="@/assets/images/kxauto.png"
          alt="描述图片的文字"
        />
        <span>开轩自动化</span>

        <span class="kx-hezuo">
          商务合作：18509234888（同微信） 技术支持：18691805301（同微信）
        </span>
      </div>
    </el-row>

    <!-- 弹窗 -->
    <form-dialog ref="formRef" />
  </div>
</template>

<script setup>
import formDialog from "./alarmForm.vue";
import { ref } from "vue";
import { act, createWebSocket } from "@/utils/websocket"; //引入websocket
const formRef = ref();
//let computedResults = useTagResults(tagKeys, act.ControlLogix5500.Belt_4_2_2);
const alarmBtn = () => {
  formRef.value.openDialog();
};
const tableHeader = [
  { key: "project", label: "项目" },
  { key: "carbonMonoxide", label: "一氧化碳（ppm）" },
  { key: "methane", label: "甲烷" },
  { key: "temperature", label: "温度（℃）" },
  { key: "smog", label: "烟雾（ppm）" },
  { key: "dust", label: "粉尘（ppm）" },
];
const tableData = [
  {
    project: "5-2胶运大巷Ⅰ部皮带机",
    carbonMonoxide: 1,
    methane: 1,
    temperature: 1,
    smog: 1,
    dust: 1,
  },
  {
    project: "5-2胶运大巷Ⅱ部皮带机",
    carbonMonoxide: 1,
    methane: 1,
    temperature: 1,
    smog: 1,
    dust: 1,
  },
  {
    project: "5-2南胶运巷皮带机",
    carbonMonoxide: 1,
    methane: 1,
    temperature: 1,
    smog: 1,
    dust: 1,
  },
  {
    project: "4-2胶运大巷Ⅰ部皮带机",
    carbonMonoxide: 1,
    methane: 1,
    temperature: 1,
    smog: 1,
    dust: 1,
  },
  {
    project: "4-2胶运大巷Ⅱ部皮带机",
    carbonMonoxide: 1,
    methane: 1,
    temperature: 1,
    smog: 1,
    dust: 1,
  },
  {
    project: "4-2南胶运大巷Ⅰ部皮带机",
    carbonMonoxide: 1,
    methane: 1,
    temperature: 1,
    smog: 1,
    dust: 1,
  },
  {
    project: "4-2南胶运大巷Ⅱ部皮带机",
    carbonMonoxide: 1,
    methane: 1,
    temperature: 1,
    smog: 1,
    dust: 1,
  },
  {
    project: "3-1胶运大巷皮带机",
    carbonMonoxide: 1,
    methane: 1,
    temperature: 1,
    smog: 1,
    dust: 1,
  },
  {
    project: "2-2胶运大巷皮带机",
    carbonMonoxide: 1,
    methane: 1,
    temperature: 1,
    smog: 1,
    dust: 1,
  },
];
const formatValue = (key, value) => {
  // 需要保留小数的字段
  const floatFields = ["temperature", "carbonMonoxide", "methane", "dust"];
  if (floatFields.includes(key) && typeof value === "number") {
    return value.toFixed(2);
  }
  return value;
};
</script>

<style lang="scss" scoped>
.title {
  border-bottom: 5px double #6f89b0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
</style>
